CSS 關鍵幀 (Keyframes)

關鍵幀允許你定義動畫在不同時間點的狀態，並指定每個狀態下的 CSS 屬性變化。使用 @keyframes 規則，可以指定動畫的變化過程。

• 語法：

  @keyframes animationName {
    0% {
      /* 起始狀態 */
    }
    100% {
      /* 結束狀態 */
    }
  }
  

• 範例： 建立一個方塊從左移到右的動畫：

  @keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100px);
    }
  }
  

動畫屬性 (Animation Properties)

為了控制動畫的行為，CSS 提供了多個動畫相關的屬性，可以用來指定動畫的時長、速度曲線、重複次數等。

• 動畫屬性包含以下幾個關鍵點：

  1. animation-name: 指定要應用的關鍵幀動畫名稱。
  2. animation-duration: 定義動畫持續時間。
  3. animation-timing-function: 設定動畫的速度曲線，如 ease、linear 等。
  4. animation-delay: 設定動畫開始前的延遲時間。
  5. animation-iteration-count: 設定動畫重複次數，可以是數字或 infinite。
  6. animation-direction: 設定動畫的方向，例如 normal 或 reverse。

• 語法範例：

  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }
  

進階應用：多段關鍵幀動畫

@keyframes 定義多個狀態，讓動畫在過程中發生多段變化。

• 範例：

  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-50px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  .ball {
    animation: bounce 1s infinite;
  }
  

範例展示了一個彈跳效果，動畫從初始位置到向上移動，再回到原點。

實際應用場景

• 按鈕動畫: 在滑鼠懸停時，按鈕的背景顏色或大小會平滑改變。
• 滾動視差效果: 在使用者滾動頁面時，背景圖片或元素會根據滾動位置平滑移動。
• 載入動畫: 加載數據時使用旋轉圖標或進度條動畫，增強使用者體驗。